<!--  -->
<template>
  <div class="">
  <el-cascader :options="options" v-model="values" @change="handleChange">
  </el-cascader>
  
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      values:'',
      options:[
        {
          value:'1',
          label:'水果',
          children:[
            {
              value:'1.1',
             label:'苹果',
              children:[
                {
                  value:'1.1.1',
                  label:'红苹果'
                },
                {
                  value:'1.1.2',
                  label:'青苹果'
                }
              ]
            },
            {
              value:'1.2',
              label:'香蕉',
              children:[
                {
                  value:'1.1.1',
                  label:'芭蕉'
                },
                {
                  value:'1.1.2',
                  label:'小米蕉'
                }
              ]
            },
            {
              value:'1.3',
              label:'橘子',
              children:[
                {
                  value:'1.3.1',
                  label:'金桔',
                },{
                  value:'1.3.2',
                  label:'柚子',
                },{
                  value:'1.3.3',
                  label:'脐橙'
                }
              ]
            }
          ]
        },
        {
          value:'2',
          label:'衣服',
          children:[
            {
              value:'2.1',
              label:'秋衣',
              children:[
                {
                  value:'2.1.1',
                  label:'卫衣'
                },
                {
                  value:'2.1.2',
                  label:'外套'
                }
              ]
            },
            {
              value:'2.2',
              label:'夏装',
              children:[
                {
                  value:'2.2.1',
                  label:'短袖'
                },
                {
                  value:'2.2.2',
                  label:'短裤'
                }
              ]
            },
            {
              value:'2.3',
              label:'冬装',
              children:[
                {
                  value:'2.3.1',
                  label:'羽绒服',
                },{
                  value:'2.3.2',
                  label:'秋裤',
                },{
                  value:'2.3.3',
                  label:'风衣'
                }
              ]
            }
          ]
        },
        {
          value:'3',
          label:'生活用品',
          children:[
            {
              value:'3.1',
              label:'牙膏',
              children:[
                {
                  value:'3.1.1',
                  label:'黑妹'
                },
                {
                  value:'3.1.2',
                  label:'佳洁士'
                }
              ]
            },
            {
              value:'3.2',
              label:'沐浴露',
              children:[
                {
                  value:'3.1.1',
                  label:'舒肤佳'
                },
                {
                  value:'3.1.2',
                  label:'力士'
                }
              ]
            },
            {
              value:'3.3',
              label:'洗发水',
              children:[
                {
                  value:'3.3.1',
                  label:'清扬',
                },{
                  value:'3.3.2',
                  label:'清道夫',
                },{
                  value:'3.3.3',
                  label:'飘柔'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange:function(values){
      console.log("现在选中的数据是",values);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped></style>
